<template>
  <div>
    <!-- 权限管理 -->
    <el-dialog
      title="权限管理"
      :visible.sync="show"
      width="50%"
      :before-close="closeDialog"
    >
      <!-- 信息展示 -->
      <!-- 添加权限 -->
      <div>
        <el-button type="primary" @click="addJurisdiction()">添加权限</el-button>
      </div>
      <!-- 权限管理 -->
      <div>
        <el-table
          ref="userInfoTable"
          v-loading="loading"
          :data="allJurisdiction.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          fit
          highlight-current-row
        >

          <el-table-column
            label="序号"
            type="index"
            min-width="15%"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="jurisdictionName"
            label="权限名称"
            min-width="15%"
          />
          <el-table-column
            align="center"
            label="详情"
            min-width="15%"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="updateJurisdiction(scope.row)">修改</el-button>
              <el-button type="text" @click="delJurisdiction(scope.row)"><p style="color:#e74c3c">删除</p></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页功能 -->
      <el-row style="margin-top:2rem">
        <el-col :span="12">
          <!-- 分页功能 -->
          <div id="pages">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[5,10,15,20,30,50]"
              :page-size="pagesize"
              layout="total , sizes , prev , pager , next"
              :total="allJurisdiction.length"
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { addJurisdictionName, updateJurisdictionName, delJurisdictionName } from '../../api/jurisdiction.js'
export default {
  data() {
    return {
      allJurisdiction: [], // 权限信息
      // 页面存储数据
      show: false,
      loading: true,
      currentPage: 1, // 默认显示页面为1
      pagesize: 20 // 每页的数据条数
    }
  },
  created() {
    // dialog信息初始化
    this.createDialogStatus()
  },
  methods: {
    // dialog信息初始化
    createDialogStatus() {
      this.show = false
    },
    // 展示Dialog
    showDialog(allJurisdiction) {
      // 展示dialog弹出框
      this.show = true
      // 存储权限信息
      for (let i = 0; i < allJurisdiction.length; i++) {
        if (allJurisdiction[i].jurisdictionId === '0') {
          allJurisdiction.splice(i, 1)
          this.allJurisdiction = allJurisdiction
          break
        }
      }

      this.loading = false
    },
    // 添加权限信息
    addJurisdiction() {
      // 展示添加信息弹出框
      this.$prompt('请输入权限名称', '添加权限', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\u4e00-\u9fa5]+$/,
        inputErrorMessage: '权限名称输入有误，仅可以输入文字'
      }).then(({ value }) => {
        addJurisdictionName(value, this.allJurisdiction.length + 1).then((res) => {
          this.$message({
            type: 'success',
            message: '添加权限成功'
          })
          setTimeout(() => {
            top.location.reload()
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消添加'
        })
      })
    },
    // 更新权限
    updateJurisdiction(jurisdiction) {
      // 展示添加信息弹出框
      this.$prompt('请输入权限名称', '添加权限', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\u4e00-\u9fa5]+$/,
        inputErrorMessage: '权限名称输入有误，仅可以输入文字',
        inputPlaceholder: jurisdiction.jurisdictionName
      }).then(({ value }) => {
        updateJurisdictionName(value, jurisdiction.jurisdictionId).then((res) => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          setTimeout(() => {
            top.location.reload()
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        })
      })
    },
    // 删除权限
    delJurisdiction(jurisdiction) {
      this.$confirm('强烈建议不要在学期开放时间内删除权限名称，点击确定后删除', '请注意：', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delJurisdictionName(jurisdiction.jurisdictionId).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          setTimeout(() => {
            top.location.reload()
          }, 300)
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 页面逻辑代码
    // 关闭dialog
    closeDialog() {
      this.show = false
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
    },
    // 切换选择用户的时候进行赋值
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scope>

</style>
